<template>
  <div class='workorder'>
    <a-row class='row_appeal_2'>
      <a-col class='appeal_header in-he' :span='12'>
        <div class='search_box'>
          <a-input-search v-model='Search' placeholder='' enter-button @search='onSearch' class='a_input'/>
        </div>
      </a-col>
    </a-row>
    <a-row class='row_appeal_3'>
      <a-col class='table_name' :span='2' :offset='5'>
        <h1>外部工单情况</h1>
      </a-col>
      <a-col class='table_name' :span='2' :offset='13'>
        <h1>内部工单情况</h1>
      </a-col>
    </a-row>
    <a-row class='row_appeal_4'>
      <a-table
        :columns='columns'
        :data-source='datalist'
        :pagination='{ pageSize: 10,total:this.total }'
        @change='handleTableChange'
      >
        <a slot="action" slot-scope="col" href="javascript:;" @click="details(col)">查看详情</a>
        <a slot='action1' slot-scope='col' href='javascript:;' @click='get95598(col)'>填报到内部</a>
        <span slot='action2' slot-scope='col' style="color:darkgray;"><hr
          style="transform: rotate(90deg); width: 56px; position: relative;top:5px;color: DarkGray;border-right-width: 0px;border-left-width: 0px;border-bottom-width: 0px;"><hr
          style="transform: rotate(90deg); width: 56px; position: relative;top:-3px;left: 10px;color: DarkGray;border-right-width: 0px;border-left-width: 0px;border-bottom-width: 0px;"></span>
        <a slot='action3' slot-scope='col' href='javascript:;' @click='getOrder(col)'
           v-if="col.workOrderNumber != null">打开内部工单</a>
        <a slot='action4' slot-scope='col' href='javascript:;' @click='get12398(col)'
           v-if="col.workOrderNumber != null">填报到外部</a>
      </a-table>
    </a-row>
    <a-modal
      v-model="visible"
      title="投诉/举报/咨询办理"
      @ok="handleOk"
      dialogClass="a_modal"
      width="1500px"
      top="10px"
    >
      <table border="1" class="table">
        <tr class="DataContent_tr">
          <td colspan="2" class="title">业务类型</td>
          <td class="colspan_tousu answer">{{ datalist.serviceType }}</td>
          <td class="colspan_qudao title">信息来源渠道</td>
          <td class="colspan_phono answer">{{ datalist.informationSources }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">接收投诉/投诉/咨询的时间</td>
          <td class="answer">{{ datalist.complaintTime }}</td>
          <td class="title">案号</td>
          <td class="answer">{{ datalist.caseNumber }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">投诉/举报/咨询大类</td>
          <td class="answer">{{ datalist.complaintSuperclass }}</td>
          <td class="title">投诉/举报/咨询小类</td>
          <td class="answer">{{ datalist.complaintSubclass }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td rowspan="4" class="rowspan_gaikuang title">投诉/举报/咨询人概况</td>
          <td class="rowspan_leixing title">投诉/举报/咨询人类型</td>
          <td colspan="3" class="answer">{{ datalist.plaintiffType }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td class="title">姓名或名称</td>
          <td colspan="3" class="answer">{{ datalist.plaintiffName }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td class="title">联系电话</td>
          <td colspan="3" class="answer">{{ datalist.plaintiffTelephone }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td class="title">地址</td>
          <td colspan="3" class="answer">{{ datalist.defendantAddress }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td rowspan="4" class="title">被投诉（举报）人概况</td>
          <td class="title">被投诉（举报）人类型</td>
          <td colspan="3" class="answer">{{ datalist.defendantType }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td class="title">姓名或名称</td>
          <td colspan="3" class="answer">{{ datalist.defendantName }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td class="title">联系电话</td>
          <td colspan="3" class="answer">{{ datalist.defendantTelephone }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td class="title">地址</td>
          <td colspan="3" class="answer">{{ datalist.cdefendantAddress }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">投诉/举报/咨询事项</td>
          <td colspan="3" class="answer">{{ datalist.complaintContent }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">投诉/举报/咨询请求</td>
          <td colspan="3" class="answer">{{ datalist.complaintRequest }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">投诉/举报/咨询附件</td>
          <td colspan="3" class="answer">{{ datalist.complaintEnclosure }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">转企业办理时间</td>
          <td colspan="3" class="answer">{{ datalist.enterpriseHandleTime }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">转企业办理意见</td>
          <td colspan="3" class="answer">{{ datalist.enterpriseHandleIdea }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title"><i style="color:red">*</i> 办理结果</td>
          <td colspan="3" class="answer">{{ datalist.handlingResults }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">附件</td>
          <td colspan="3" class="answer">{{ datalist.enclosure }}</td>
        </tr>
      </table>
    </a-modal>
  </div>
</template>

<script>

import {getAction, postAction, putAction} from '@/api/manage'

const columns = [
  {title: '业务类型', dataIndex: 'serviceType', id: '1', width: 60},
  {title: '接受投资/举报/咨询的时间', dataIndex: 'complaintTime', id: '2', width: 150, ellipsis: true},
  {title: '姓名或名称', dataIndex: 'plaintiffName', id: '3', width: 100},
  {title: '联系电话', dataIndex: 'plaintiffTelephone', id: '4', width: 110},
  {title: '地址', dataIndex: 'defendantAddress', id: '5', width: 90, ellipsis: true},
  {title: '投诉/举报/日期咨询事项', dataIndex: 'complaintContent', id: '6', width: 100, ellipsis: true},
  {
    title: '',
    id: '13',
    width: 100,
    fixed: 'right',
    scopedSlots: {customRender: 'action'}
  },
  {
    title: '',
    id: '7',
    fixed: 'right',
    width: 10,
    ellipsis: true,
    scopedSlots: {customRender: 'action1'}
  },
  {
    title: '',
    id: '22',
    dataIndex: '',
    fixed: 'right',
    width: 100,
    color: 'black',
    scopedSlots: {customRender: 'action2'}
  },
  {
    title: '工单号',
    id: '8',
    dataIndex: 'workOrderNumber',
    fixed: 'right',
    width: 100,
    ellipsis: true
  },
  {
    title: '工单状态',
    id: '9',
    dataIndex: 'workOrderStatus',
    fixed: 'right',
    width: 100
  },
  {
    title: '',
    id: '11',
    fixed: 'right',
    width: 100,
    ellipsis: true,
    scopedSlots: {customRender: 'action3'},
  },
  {
    title: '',
    id: '12',
    fixed: 'right',
    width: 180,
    scopedSlots: {customRender: 'action4'}
  },
]

export default {
  data() {
    return {
      visible: false,
      datalist: [],
      columns,
      Search: '',
      total: 0,
      current: 1
    }
  },

  created() {
    this.getpartlist()
  },

  methods: {

    //分页点击方法
    handleTableChange(page) {
      var register = {
        pageNo: page.current
      }
      getAction('/nlpcs/nlpcs_12398/pageList', register)
        .then(res => {
          console.log(res)
          this.datalist = res.result.records
          this.data.forEach((item, index) => {
            item.key = index + 1
          })
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 提交95598
    get95598(value) {
      this.$message.info('回复到123456')
      console.log(value)

    },

    // 回复到12398事件
    get12398(value) {
      this.$message.info('回复到123456')
      console.log(value)

    },

    // 打开工单
    getOrder(value) {
      this.$message.info('回复到123456')
      console.log(value)
      // this.$router.push('/voice/search')
      // console.log(value)
    },

    // 全局搜索事件
    onSearch() {
      var register = {
        plaintiffName: this.Search
      }
      if (register.plaintiffName == '') {
        this.getpartlist()
      } else {
        getAction('/nlpcs/nlpcs_12398/pageList', register)
          .then(res => {
            this.datalist = res.result.records
            this.total = res.result.total
            console.log(res)
            if (res.result.records.length == 0) {
              let register = {
                serviceType: this.Search
              }
              if (register.serviceType == '') {
                this.getpartlist()
              }
              getAction('/nlpcs/nlpcs_12398/pageListForType', register)
                .then(res => {
                  this.datalist = res.result.records
                  this.total = res.result.total
                  console.log(res)
                })
                .catch(err => {
                  consoel.log(err)
                })
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },

    getpartlist() {
      var register = {}
      getAction('/nlpcs/nlpcs_12398/pageList', register)
        .then(res => {
          console.log(res)
          this.datalist = res.result.records
          this.total = res.result.total
        })
        .catch(err => {
          console.log(err)
        })
    },

    details(v) {     // 查看详情事件
      console.log(v);

      this.visible = true
      this.datalist = v
    },

    handleOk(e) {       // 确定按钮事件
      this.visible = false
    },
  }
}
</script>
<style scoped>
.workorder {
  margin: 40px;
  min-height: calc(100vh - 59px);
}

.row_appeal_3 {
  margin-top: 20px;
}

.row_appeal_4 {
  margin-top: 20px;
}
</style>